<template>
  <el-dialog
    v-model="visible"
    :title="title"
    :width="width"
    :show-close="showClose"
    :close-on-click-modal="closeOnClickModal"
    @closed="onClosed"
  >
    <div class="image-confirm__content">
      <p v-if="message" class="image-confirm__message">{{ message }}</p>
      <div class="image-confirm__preview">
        <el-image
          :src="imageUrl"
          fit="contain"
          :preview-src-list="[imageUrl]"
          style="max-width: 100%; max-height: 400px; margin: 0 auto; display: block"
        />
      </div>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel" :autofocus="!disableCancel">
          {{ cancelButtonText }}
        </el-button>
        <el-button
          type="primary"
          @click="confirm"
          :loading="confirmLoading"
          :autofocus="disableCancel"
        >
          {{ confirmButtonText }}
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { ref } from 'vue';

interface ImageConfirmOptions {
  title?: string;
  message?: string;
  width?: string;
  confirmButtonText?: string;
  cancelButtonText?: string;
  showClose?: boolean;
  closeOnClickModal?: boolean;
  beforeConfirm?: () => boolean | Promise<boolean>; // 阻止确认的钩子
  confirmLoading?: boolean;
  disableCancel?: boolean; // 禁用取消按钮（比如拍照场景）
}

// 定义 props
defineProps<{
  imageUrl: string;
}>();

const emit = defineEmits(['update:modelValue', 'confirm', 'cancel']);

const visible = ref(true);
const confirmLoading = ref(false);

// 默认配置
const options = ref<ImageConfirmOptions>({
  title: '确认图片',
  message: '请确认以下图片是否正确',
  width: '500px',
  confirmButtonText: '确认',
  cancelButtonText: '取消',
  showClose: true,
  closeOnClickModal: true,
  confirmLoading: false,
  disableCancel: false
});

// // 合并配置（通过 setup 接收）
// const setOptions = (opts: ImageConfirmOptions) => {
//     options.value = { ...options.value, ...opts }
//     confirmLoading.value = !!opts.confirmLoading
// }

// 解构配置
const title = computed(() => options.value.title);
const message = computed(() => options.value.message);
const width = computed(() => options.value.width);
const confirmButtonText = computed(() => options.value.confirmButtonText);
const cancelButtonText = computed(() => options.value.cancelButtonText);
const showClose = computed(() => options.value.showClose);
const closeOnClickModal = computed(() => options.value.closeOnClickModal);
const disableCancel = computed(() => options.value.disableCancel);

// 确认
const confirm = async () => {
  if (options.value.beforeConfirm) {
    const allow = await options.value.beforeConfirm();
    if (!allow) return;
  }
  confirmLoading.value = true;
  emit('confirm');
};

// 取消
const cancel = () => {
  visible.value = false;
  emit('cancel');
};

// 关闭后触发
const onClosed = () => {
  emit('update:modelValue', false);
};
</script>

<style scoped>
.image-confirm__content {
  text-align: center;
}

.image-confirm__message {
  margin-bottom: 16px;
  color: #606266;
  font-size: 14px;
}

.image-confirm__preview {
  margin: 0 auto;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow: hidden;
  background-color: #f5f5f5;
}
</style>
